import {designPage, reactive, useRefs} from "@peryl/react-compose";
import {$ai, $dialog, $message, Alert, Box, Button, Form, FormInput, FormSelect, i18n, Input, Layout, LayoutSection, PageCard, PageCardContent, PageCardTitle, Select, SelectOption, Space} from "plain-design";
import {default_ai_configs} from "./AIUtils";

export default designPage(() => {

  const { refs, onRef } = useRefs({ form: Form });

  const state = reactive({
    formData: {
      "OrderID": "ORD20250419004",
      "CustomerID": "CUS004_XXXXXXXXX",
      "CustomerPhone": "13312348765",
      "CustomerEmail": "lucy@163.com",
      "OrderTime": "2025-04-19 08:20:00",
      "CustomerName": "露西",
      "OrderStatus": "new",
      "OrderRemarks": "",
    },
    validateDescription: `
当订单状态为已取消时，订单备注不能为空
客户编号长度不能小于10个字符
客户邮箱必须使用163邮箱
    `
    // validateDescription: "当订单状态为已取消时订单备注不能为空",
  });

  const selectOptions: { label: string, val: string }[] = [
    { label: i18n.$intl('page.virtualFormMultiplePage.selectOptions.new').d("新建"), val: 'new' },
    { label: i18n.$intl('page.virtualFormMultiplePage.selectOptions.to_pay').d("待支付"), val: 'to_pay' },
    { label: i18n.$intl('page.virtualFormMultiplePage.selectOptions.to_ship').d("待发货"), val: 'to_ship' },
    { label: i18n.$intl('page.virtualFormMultiplePage.selectOptions.cancel').d("已取消"), val: 'cancel' },
  ];

  const save = async () => {
    await aiValidate();
    await refs.form?.validate();
    $message.success('保存成功!');
  };

  const aiValidate = async () => {

    const systemPrompt = `
      你是一名表单校验专家，你需要根据已有的字段信息加上表单中的字段值加上用户的校验要求来判断校验是否成功；
      已知的字段值为：
      订单编号:${state.formData.OrderID}
      客户编号:${state.formData.CustomerID}
      客户姓名:${state.formData.CustomerName}
      客户电话:${state.formData.CustomerPhone}
      客户邮箱:${state.formData.CustomerEmail}
      下单时间:${state.formData.OrderTime}
      订单状态:${selectOptions.find(i => i.val === state.formData.OrderStatus)?.label}
      订单备注:${state.formData.OrderRemarks}

      你需要固定返回json数据数组，格式为：[{label:"字段标题",field:"字段标识",message:"如果校验不通过，这里给出不通过的原因，校验通过则为空",value:"字段值"}]
      注意的是，如果某个字段通过校验，则将其从返回的json数组中移除
      你只需要返回这个json，不需要做任何解释和思考
    `;

    console.log({
      userContent: state.validateDescription,
      systemPrompt,
    });

    const { message } = await $ai.chatSystem(
      state.validateDescription,
      systemPrompt,
      default_ai_configs.qwen
    );
    $dialog({
      editValue: message,
      editType: 'textarea'
    });
  };

  return () => (
    <>
      <PageCard full>
        <PageCardTitle title="AI校验表单">
          <Button label="保存" asyncHandler={save}/>
        </PageCardTitle>
        <PageCardContent full noPadding>
          <Layout fullHeight>
            <LayoutSection position="left" modelValue={400}>
              <Box className="padding" style={{ boxSizing: 'border-box', height: '100%' }}>
                <Input textarea style={{ height: '100%' }} v-model={state.validateDescription}/>
              </Box>
            </LayoutSection>
            <LayoutSection>
              <Box className="padding">
                <Form column={3} modelValue={state.formData} ref={onRef.form}>
                  <FormInput label="订单编号" field="OrderID" v-model={state.formData.OrderID}/>
                  <FormInput label="客户编号" field="CustomerID" v-model={state.formData.CustomerID}/>
                  <FormInput label="客户姓名" field="CustomerName" v-model={state.formData.CustomerName}/>
                  <FormInput label="客户电话" field="CustomerPhone" v-model={state.formData.CustomerPhone}/>
                  <FormInput label="客户邮箱" field="CustomerEmail" v-model={state.formData.CustomerEmail}/>
                  <FormInput label="下单时间" field="OrderTime" v-model={state.formData.OrderTime}/>
                  <FormSelect label="订单状态" field="OrderStatus" v-model={state.formData.OrderStatus}>
                    {selectOptions.map(i => (<SelectOption label={i.label} key={i.val} val={i.val}/>))}
                  </FormSelect>
                  <FormInput label="订单备注" field="OrderRemarks" v-model={state.formData.OrderRemarks} textarea formAttrs={{ column: 2 }}/>
                </Form>
              </Box>
              <Box className="pl pr pb">
                <Alert>
                  <strong>
                    <div>目前来说无法实现通过大模型的方式来实现表单校验，比如将校验要求描述以及当前的字段数据一起发送给大模型，大模型并不能很好地完全校验正确；</div>
                    <div>比如向大模型发送内容：</div>
                  </strong>
                  <div>
                    {`
你是一名表单校验专家，你需要根据已有的字段信息加上表单中的字段值加上用户的校验要求来判断校验是否成功；
已知的字段值为：
订单编号:ORD20250419004
客户编号:asdfghj
客户姓名:露西
客户电话:13312348765
客户邮箱:lucy@163.com
下单时间:2025-04-19 08:20:00
订单状态:新建
订单备注:
你需要固定返回json数据，格式为 {flag:"布尔值，表示校验是否通过", data: []}
返回的数据data，如果校验通过则为null，如果校验不通过，则为：[{label:"字段标题",field:"字段标识",message:"字段校验不通过的原因",value:"字段值",flag:"布尔值，字段值是否通过校验"}]
你不需要做任何解释，只需要返回json数据

用户的要求为：
当订单状态为已取消时，订单备注不能为空
客户编号长度不能小于10个字符
客户邮箱必须使用163邮箱
                  `.split('\n').map((item, index) => <div key={index}>{item}</div>)}
                  </div>
                  <div>
                    <strong>如果将这段内容，在一些大模型的在线问答服务中一般可以得到正确的答案，但是如果是调用API，返回错误答案的概率很高；</strong>
                  </div>
                </Alert>
              </Box>
            </LayoutSection>
          </Layout>
        </PageCardContent>
      </PageCard>
    </>
  );
});
